<template>
  <div>
    <!-- <div class="img_top">
      <yd-lightbox :num="imagelist.length">
        <yd-lightbox-img v-for="(item, index) in imagelist" :key="index" :src="item.src" class="img_top_img"></yd-lightbox-img>
      </yd-lightbox>
    </div> -->
    <yd-lightbox :num="imagelist.length">
        <div style="width:100%;height:200px; overflow-y:hidden">
        <yd-lightbox-img v-for="(item, index) in imagelist" :key="index" :src="item.src" style="width:100%;height:200px"></yd-lightbox-img>
        </div>
        <div class="imgnum">
            <hd-svg-icon name="hd-tupian" size="13px" color="#bbbbbb" style="margin-top:3px"></hd-svg-icon>&nbsp;&nbsp;{{imagelist.length}}
        </div>
      </yd-lightbox>
    <div class="score_style">
      <span class="num_style">{{pingjunfen.average}}</span>
      <br>
      <span class="text_evaluate">非常棒</span>
    </div>
    <div class="date_style" @click = "openByDialog" :value = "calendar4.display">
      <yd-cell-item arrow>
          <div slot="left" class="check_in"><span class="font-color">入店</span> {{monthstart}}月{{daystart}}日</div>
          <div slot="left" class="check_out"><span class="font-color">离店</span> {{monthend}}月{{dayend}}日</div>
          <div slot="right">共{{daynum}}晚</div>
      </yd-cell-item>                                
    </div>
    <yd-infinitescroll :callback='load' ref='infinitescrollDemo'>
      <div class="room_type" v-for="item in list" :key="item.index"  slot="list">
        <img :src="item.top_pic" class="room_type_img">
        <div style="float:left">
          <span class="room_type_title">{{item.name}}</span>
        </div>
        
        <div style="float:right;margin-top:25px;">
          <div class="room_type_price">￥{{item.lowGuidePrice/100}}元</div>
          <br>
          <div>
              <div class="no-book" v-if="item.include==='none'">不可预订</div>
              <div class="no-book" v-if="item.include==='part'">仅可订</div>
            <router-link :to="{path:'liveorder',query: {place_code:outdata.place_code,name:item.name,guide_price:item.guide_price,sale_code: item.code,checkindate: checkindate, checkoutdate: checkoutdate}}">
              <yd-button size="small" type="primary"  bgcolor="#FF0000" color="#fff" style="float:right;margin-right:20px;" v-if="item.include==='all'">预订</yd-button>
            </router-link>
          </div>
        </div>
      </div>
      <span slot='doneTip'>啦啦啦，啦啦啦，没有数据啦~~</span>
      <!-- 加载中提示，不指定，将显示默认加载中图标 -->
      <img slot='loadingTip' src='http://static.ydcss.com/uploads/ydui/loading/loading10.svg'/>
    </yd-infinitescroll>
    <!-- 显示日历 -->
    <div>
      <transition name = "fade">
        <div class = "calendar-dialog" v-if = "calendar4.show">
          <div class = "calendar-dialog-mask" @click = "closeByDialog"></div>
            
          <div class = "calendar-dialog-body">
            <calendar :range = "calendar4.range" :zero = "calendar4.zero" :lunar = "calendar4.lunar" :value = "calendar4.value"  @select = "calendar4.select"></calendar>
          </div>
            
        </div>
      </transition>
    </div>

  </div>  
</template>
<script>
import calendar from './calendar.vue';

export default {
  name: 'online_booking',
  components: {
    calendar
  },
  data() {
    return {
      list: [],
      imagelist: [],
      outdata: '',
      pingjunfen: '',
      place_code: '',
      pageSize: '5',
      pageNo: '1',
      yearstart: '',
      monthstart: '',
      daystart: '',
      yearend: '',
      monthend: '',
      dayend: '',
      daynum: '',
      datestart: '',
      dateend: '',
      checkindate: [],
      checkoutdate: [],
      imagearr: [],
      cancelDate: {},
      checkindate1: '',
      checkoutdate1: '',
      calendar4: {
        display: '',
        show: false,
        range: true,
        zero: true,
        value: [], // 默认日期
        lunar: true, // 显示农历
        select: (begin, end) => {
          console.log(begin, end)
          this.calendar4.show = false;
          this.calendar4.value = [begin, end];
          this.calendar4.display = begin.join('/') + ' ~ ' + end.join('/');
          this.yearstart = begin[0];
          this.monthstart = begin[1];
          this.daystart = begin[2];
          this.yearend = end[0];
          this.monthend = end[1];
          this.dayend = end[2];
          if (this.yearstart === this.yearend && this.monthstart === this.monthend && this.daystart === this.dayend) {
            this.$dialog.toast({mes: '请选择离店日期!'})
            this.date = new Date();
            this.yearstart = this.date.getFullYear();
            this.monthstart = this.date.getMonth() + 1;
            this.daystart = this.date.getDate();
            this.yearend = this.date.getFullYear();
            this.monthend = this.date.getMonth() + 1;
            this.dayend = this.date.getDate() + 1;
            this.datestart = new Date(this.calendar4.begin).getTime();
            this.dateend = new Date(this.calendar4.end).getTime()
            this.daynum = parseInt((this.dateend - this.datestart) / (1000 * 60 * 60 * 24));
            this.checkindate = [this.yearstart, this.monthstart, this.daystart].join('-');
            this.checkoutdate = [this.yearend, this.monthend, this.dayend].join('-');
            this.checkindate1 = this.checkindate;
            this.checkoutdate1 = this.checkoutdate;
          } else {
            this.datestart = new Date(begin).getTime();
            this.dateend = new Date(end).getTime()
            this.daynum = parseInt((this.dateend - this.datestart) / (1000 * 60 * 60 * 24));
            // console.log(this.daynum);
            this.$router.push({path: 'online_booking', query: {yearstart: this.yearstart, monthstart: this.monthstart, daystart: this.daystart, yearend: this.yearend, monthend: this.monthend, dayend: this.dayend, daynum: this.daynum, id: this.$route.query.id}});
            this.checkindate = [this.yearstart, this.monthstart, this.daystart].join('-');
            this.checkoutdate = [this.yearend, this.monthend, this.dayend].join('-');
            this.checkindate1 = this.checkindate;
            this.checkoutdate1 = this.checkoutdate;
            // console.log(this.checkindate)
            location.reload();
          }
        }
      }
    }
  },
  mounted: function() {
    this.date = new Date()
    this.calendar4.begin = [this.date.getFullYear(), this.date.getMonth() + 1, this.date.getDate()];
    this.calendar4.end = [this.date.getFullYear(), this.date.getMonth() + 1, this.date.getDate() + 1];
    // console.log('!!!!!!!!!!!!!' + this.$route.query.daystart)
    if (this.$route.query.daystart === undefined) {
      this.yearstart = this.date.getFullYear();
      this.monthstart = this.date.getMonth() + 1;
      this.daystart = this.date.getDate();
      this.yearend = this.date.getFullYear();
      this.monthend = this.date.getMonth() + 1;
      this.dayend = this.date.getDate() + 1;
      this.datestart = new Date(this.calendar4.begin).getTime();
      this.dateend = new Date(this.calendar4.end).getTime()
      this.daynum = parseInt((this.dateend - this.datestart) / (1000 * 60 * 60 * 24));
      this.checkindate = [this.yearstart, this.monthstart, this.daystart].join('-');
      this.checkoutdate = [this.yearend, this.monthend, this.dayend].join('-');
      this.checkindate1 = this.checkindate;
      this.checkoutdate1 = this.checkoutdate;
      // console.log('=====' + this.checkindate)
    } else {
      this.yearstart = this.$route.query.yearstart;
      this.monthstart = this.$route.query.monthstart;
      this.daystart = this.$route.query.daystart;
      this.yearend = this.$route.query.yearend;
      this.monthend = this.$route.query.monthend;
      this.dayend = this.$route.query.dayend;
      this.daynum = this.$route.query.daynum;
      this.checkindate = [this.yearstart, this.monthstart, this.daystart].join('-');
      this.checkoutdate = [this.yearend, this.monthend, this.dayend].join('-')
      this.checkindate1 = this.checkindate;
      this.checkoutdate1 = this.checkoutdate;
      // console.log('======' + this.checkindate)
    }
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.getInfo,
        data: {
          type: 'H',
          place_id: this.$route.query.id
        },
        success: (resultData) => {
          this.outdata = resultData.data.sub_place;
          this.place_code = resultData.data.sub_place.place_code
          this.imagearr = resultData.data.sub_place.pictures_arr.split(',');
          this.imagearr.forEach(function(element) {
            var imagelist = {};
            imagelist['src'] = element;
            this.imagelist.push(imagelist);
          }, this);
          // console.log(this.list);
          this.hdAjax({
            url: this.API.findDatedProductList,
            data: {
              pageSize: this.pageSize,
              pageNo: this.pageNo,
              place_code: this.place_code,
              checkindate: this.checkindate1,
              checkoutdate: this.checkoutdate1
            },
            success: (resultData) => {
              const _list = resultData.data.results;
              this.list = [...this.list, ..._list];
              if (_list.length < this.pageSize) {
                /* 所有数据加载完毕 */
                this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                return;
              }
              /* 单次请求数据完毕 */
              this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
              this.pageNo++;
            }
          });
        }
      });
      this.hdAjax({
        url: this.API.findAverage,
        data: {
          // type: 'J',
          place_id: this.$route.query.id
        },
        success: (resultData) => {
          this.pingjunfen = resultData.data;
        }
      });
    },
    openByDialog() {
      // console.log('你奶奶的啊!!!')
      this.calendar4.show = true;
    },
    closeByDialog() {
      // console.log('你奶奶的啊!!!')
      this.calendar4.show = false;
    }
  }
}
</script>

<style scoped>
 .img_top_img{
   height: 250px;
   width:100%;
 }
 .score_style{
   margin-top:10px;
   margin-bottom:10px;
   color:orange;
 }
 .num_style{
   font-size:.5rem;
   margin-left:5%;
 }
 .text_evaluate{
   font-size:.25rem;
  margin-left:5%;
 }
 .check_in{
   width: 50%;
   margin-left: 5px;
   padding-right: 5px;
   border-right: 1.5px solid #999999;
 }
 .date_style{
   border-top: 10px solid #F0F0F0;
   border-bottom: 10px solid #F0F0F0;
 }
 .check_out{
   padding-left: 5px;
 }
 .font-color{
   color:#999999;
 }
 .room_type{
   border-bottom: 1px solid #F0F0F0;
   height: 120px;
   width: 100%;
 }
 .room_type_img{
   float:left;
   height:100px;
   width:100px;
   margin-left: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 .room_type_title{
   font-size:.4rem;
   margin-left:10px;
   line-height: 120px;
 }
 .room_type_price{
   font-size:.5rem;
   color:orange;
   margin-right:20px;
 }
 .no-book{
   float:right;
   text-align:center;
   color: #999999;
   width: 100%;
   height:20px;
  }
 /*弹出框*/
.calendar-dialog {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  }

.calendar-dialog-mask {
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 100%;
}

.calendar-dialog-body {
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 2px;
}
</style>


